<template>
  <div>
    <div class="title">好老师 在语桥</div>
    <ul class="teacher_list">
      <li class="teacher_item" v-for="(item, index) in teacherList.slice(0,3)" :key="index">
        <div>
          <img :src="imgurl + item.img" alt />
          <div class="tea_con">
            <div class="tea_tit">
              <div class="line"></div>
              <div>{{item.name}}</div>
            </div>
            <div class="tea_info">{{item.desc}}</div>
            <div class="tea_btn">>抢占名师</div>
          </div>
        </div>
        <div class="item2_bg" v-if="index<1">
          <div style="font-size:30px;padding:80px 0 30px 40px;font-weight:bolder">层层优选师资</div>
          <div style="padding-left:80px;font-size:20px;">
            <div style>严格筛选 多轮面试</div>
            <div>千锤百炼 定期培训</div>
          </div>
          <div style="font-weight:bolder;padding:60px 0 0 50px">查看更多名师>></div>
        </div>
      </li>
      <li class="tea_bottom" v-for="(item1, index1) in teacherList.slice(3,6)" :key="index1+3">
        <div>
          <img :src="imgurl+item1.img" alt />
          <div class="tea_hide">
            <div class="tea_tit">
              <div class="line"></div>
              <div>{{item1.name}}</div>
            </div>
            <div class="tea_info">国内211重点大学英语专业研究生，拥有高级教师资格证。个人雅思成绩8.5分，其中写作7.5分，托福成绩115分，写作单科满分。</div>
            <div style="margin-left:180px;">抢占名师</div>
          </div>
        </div>
        <div class="show_p2" v-if="index1===1">
          <div style="color:#fff;font-size:22px;line-height:42px;text-align:center;margin-top:30px;">
            定期抽检 精益求精
            <br />岗前试讲 百里挑一
            <br />模拟讲课 能者为师
            <br />
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      teacherList: [],
      imgurl: "http://47.92.50.43:8888/static/"
    };
  },
  created() {
    this.$http.get("http://47.92.50.43:8888/sys/jslist").then(res => {
      console.log(res.data);
      this.teacherList = res.data;
    });
  }
};
</script>
<style>
.show_p2 {
  width: 276px;
  height: 229px;
  background: url("../assets/image/tea_or2.jpg");
  /* position: absolute; */
}

.tea_bottom {
  /* width: 307px; */
  position: relative;
  height: 203px;
  overflow: hidden;
  top: -10px;
  display: flex;
}
.tea_hide:hover {
  top: 0px;
}
.tea_hide {
  width: 307px;
  height: 256px;
  color: #fff;
  position: absolute;
  transition: 0.5s;
  top: 140px;
  background: rgba(0, 0, 0, 0.6);
}
.item2_bg {
  width: 276px;
  height: 428px;
  background: url("../assets/image/tea_or1.jpg");
  color: #fff;
}
.teacher_list {
  width: 1200px;
  height: 650px;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.teacher_item {
  display: flex;
}

.teacher_item .tea_con {
  width: 307px;
  height: 220px;
  background: #f7f7f7;
  box-sizing: border-box;
}

.tea_tit {
  display: flex;
  align-items: center;
  padding: 15px;
  font-size: 22px;
}

.tea_tit .line {
  width: 6px;
  height: 20px;
  background: #ea5404;
  margin-right: 30px;
}

.tea_info {
  padding: 0 20px;
  height: 88px;
  overflow: hidden;
  margin-bottom: 20px;
}

.tea_btn {
  width: 127px;
  height: 34px;
  border: 1px solid #2181f0;
  line-height: 34px;
  text-align: center;
  color: #2181f0;
  margin: 0 auto;
}
</style>